<template>
    <el-form ref="ruleForm" :rules="currentRules" :model="form.data" label-width="120px">
        <el-row>
            <form-item v-for="(column, prop) in form.columns" :key="prop" :visible="column.visible" :prop="prop"
                v-bind="column" v-model="form.data[prop]" :formspan="24">
            </form-item>
        </el-row>

        <el-row>
            <el-col :span="24" class="dialog-footer">
                <el-button @click="dialogCancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </el-col>
        </el-row>
    </el-form>
</template>
  
<script>
import formitem from "@/components/form/item";
export default {
    components: {
        "form-item": formitem,
    },
    data() {
        return {
            form: {
                columns: {
                    RoleIds: {
                        componentName: "form-Cascader",
                        label: "用户角色",
                        rules: "required",
                        options: [],
                        clearable: true,
                        props: {
                            multiple: true,
                            checkStrictly: true,
                            value: "RoleId",
                            label: "RoleName",
                        },
                    },
                },
                data: {
                    //RoleIds: []
                },
            },
        };
    },
    props: {
        pkid: {
            type: Number,
            default: 0,
        },
    },
    created() {
        this.currentRules = this.$core.formRules(this.form);
    },
    mounted() {
        this.getRoles()
    },
    methods: {
        getRoles() {
            let query = {
                user: "string",
                target: "RoleInfo",
                operation: "Get",
                json: ""
            }
            // 请求接口
            this.$http.generalAPI(query, (res) => {
                this.loading = false;
                if (res.Code == 200) {
                    //获取菜单信息
                    this.form.columns.RoleIds.options = this.getChildren(res.Data, res.Data.filter(c => c.ParentId == 0))
                }
            });
        },
        getChildren(all, infos) {
            var data = [];
            infos.forEach(item => {
                var childrens = all.filter(c => c.ParentId == item.RoleId);
                if (childrens.length > 0) {
                    item.children = this.getChildren(all, childrens);
                }
                data.push(item);
            });

            return data;
        },
        dialogCancel() {
            this.form.data = {RoleIds:[]};
            this.$emit("closeMoule", false);
        },
        GetEntity() {
            if (this.pkid > 0) {
                let query = {
                    user: "string",
                    target: "RoleToManage",
                    operation: "Get",
                    json: {
                        Condition: 'ManageUserId=@ManageUserId',
                        Params: {
                            ManageUserId: this.pkid
                        }
                    }
                }
                // 请求接口
                this.$http.generalAPI(query, (res) => {

                    if (res.Code == 200) {
                        this.form.data.RoleIds = []
                        res.Data.forEach(e => {
                            //获取角色信息
                            this.form.data.RoleIds.push(e.RoleId);
                        });
                    }
                });
            }
        },
        submitForm() {
            console.log(this.form.data, 111)
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let json = {
                        UserId: this.pkid,
                        RoleIds: this.form.data.RoleIds,
                    }

                    // 请求接口
                    this.$http.post("/api/role/SetToUser", json, (res) => {

                        if (res.Code == 200) {
                            //获取菜单信息
                            this.$msg.success("操作成功");
                            this.form.data = {};
                            this.$emit("closeMoule", true);
                        }
                    });
                }
            });
        },
    },
    watch: {
        pkid: {
            immediate: true,
            deep: true,
            handler(newVal, oldVal) {
            this.form.data = {RoleIds:[]};
                if (newVal > 0) {
                    this.GetEntity();
                }
            },
        },
    },
};
</script>
  
<style scoped>
.dialog-footer button {
    float: right;
    height: 36px;
    line-height: 8px;
    margin-left: 5px;
}
</style>
  